import React, { useEffect, useState } from 'react'
import { useRequest, useCounter, useSetState, useTitle } from 'ahooks'
import { getProList } from './24-request'

// import axios from 'axios'

export default function App() {


    // const { data, run } = useRequest(() => {
    //     return axios.get('http://121.89.205.189:3000/api/pro/list')
    // }, {
    //     manual: true
    // })

    const { data, run } = useRequest(getProList, {
        manual: true,
        debounceWait: 300,
        // throttleWait: 300,
    })

    useEffect(() => {
        console.log(11111, data);
    }, [data])

    const [current, {
        inc,
        dec,
    }] = useCounter(100, { min: 99, max: 110 })


    const [state, setState] = useSetState({
        a: 1,
        b: 2,
        c: 3
    })
    const [state2, setState2] = useState({
        a: 1,
        b: 2,
        c: 3
    })


    useTitle('千锋')


    return (
        <div>
            <button onClick={() => {
                // 手动触发数据请求
                run()
            }}>发送请求</button>

            <h1>{current}</h1>
            <button onClick={() => {
                inc(2)
            }}>加 2</button>
            <button onClick={() => {
                dec()
            }}>减 1</button>

            <hr />
            <h1>ahooks: {state.a} --- {state.b} --- {state.c}</h1>
            <h1>react: {state2.a} --- {state2.b} --- {state2.c}</h1>

            <button onClick={() => {
                // setState({
                //     ...state,
                //     b: 10
                // })
                setState({
                    b: 10
                })
                setState2({
                    b: 10
                })


            }}>修改 b 的只</button>
        </div>
    )
}
